/*
 * @Date: 2021-10-29 17:21:54
 * @LastEditors: qingpeng.tian
 * @LastEditTime: 2021-10-29 20:12:29
 * @Description: 问题列表
 */

import React, { useState, useEffect } from 'react'
import { Toast } from 'antd-mobile'
import { fetchList } from '../../service/api'
import './qa-list.less'

type IProps = Record<string, any>
type TableProps = Record<string, any>

const tabs = [{ title: '最新问答' }]

const QaList: React.FC<IProps> = (props) => {
    const [dataList, setDataList] = useState([])
    const fetchData = async () => {
        const res = await fetchList()

        if (res.status === 0 && res.result) {
            const rList = res.result.list || []
            setDataList(rList)
        } else {
            Toast.info(res.message)
        }

        console.log(res, 'res---')
    }
    const goDetail = (rcd: TableProps) => {
        props.history.push(`/qa-detail/${rcd.id}`)
    }

    const EmptyComp = () => {
        return <div className="empty-data">暂无数据</div>
    }

    useEffect(() => {
        try {
            fetchData()
        } catch {
            Toast.info('错误')
        }
    }, [])

    return (
        <div className="list-panel">
            <div className="qa-tab">最新问答</div>
            {dataList.length ? (
                dataList.map((dItem: TableProps) => {
                    return (
                        <div
                            className="list-item"
                            key={dItem.id}
                            onClick={() => {
                                goDetail(dItem)
                            }}
                        >
                            <div className="list-item-tit">{dItem.question}</div>
                            <div className="item-con">{dItem.content}</div>
                            <div className="item-bottom">
                                <div className="avtor"></div>
                                <span className="name">{dItem.description}</span>
                            </div>
                        </div>
                    )
                })
            ) : (
                <EmptyComp />
            )}
        </div>
    )
}

export default QaList
